<template>
    <div class="change_tele_fstep">
        <div class="header">
            <i @click='goBack' class="iconfont icon-xia"></i>修改手机号
        </div>
        <div class="content">
            <div class="inp">
                <input type="text" v-model="new_tele" ref="new_tele" placeholder="请输入你的新手机号">
                <span class="sp1" @click="getcode">{{gc}}</span>
            </div>
            <div class="inp">
                <input ref='code' type="text" placeholder="验证码" v-model="code">
            </div>
            <div class="bt"><button class="n_step" @click="n_step">下一步</button></div>
        </div>
    </div>
</template>

<script>
import '@/css/change_tele_fstep.css';
import { Toast } from 'mint-ui';

export default {
  name: 'change_tele_fstep',
  data() {
    return {
      new_tele: '',
      code: '',
      gc: '获取验证码',
    };
  },
  methods: {
    goBack() {
      window.history.length > 1
        ? this.$router.go(-1)
        : this.$router.push('/');
    },
    async getcode() {
      let time_number = 60;
      this.gc = time_number;
      this.timer = setInterval(() => {
        time_number--;
        this.gc = `${time_number}秒`;
        if (this.gc == 0) {
          this.gc = '重新发送';
          clearInterval(this.timer);
        }
      }, 1000);
      const res = await this.$api.post('/user/reg', { telphone: this.new_tele });
      const _res = res.data.info;
      const code = _res._code;
      Toast({
        message: `验证码：${code}`,
        duration: 3000,
      });
    },
    async n_step() {
      this.new_tele = this.$refs.new_tele.value;
      this.code = this.$refs.code.value;
      const res = await this.$api.post('/user/setphone', {
        telphone: this.new_tele,
        uid: this.$store.state.userinfo.uid,
        code: this.code,
      });
      console.log(res);
      const info = res.data.info;
      if (res.data.state) {
        Toast({
          message: `${info}`,
          duration: 3000,
        });
        setTimeout(() => { this.$router.replace({ name: 'pwdLogin' }); }, 1000);
      } else {
        Toast({
          message: `${info}`,
          duration: 3000,
        });
      }
    },
  },
};
</script>

<style scoped>

</style>
